<!DOCTYPE html>
<html style="display: none;" lang="zh">
    <head>
    <meta charset="utf-8">
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.5.0 -->
    <script>
        window.materialVersion = "1.5.0"
        // Delete localstorage with these tags
        window.oldVersion = [
            'codestartv1',
            '1.3.4',
            '1.4.0',
            '1.4.0b1'
        ]
    </script>

    


    <!-- dns prefetch -->
    <meta http-equiv="x-dns-prefetch-control" content="on">














    <!-- Title -->
    
    <title>
        
            输入URL后，按下回车键都发生了什么 | 
        
        C-Jimmy个人小站
    </title>

    <!-- Meta & Info -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="C-Jimmy">
    <meta name="description" itemprop="description" content="输入URL后，按下回车键都发生了什么
从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）">
    <meta name="keywords" content="C-Jimmy博客,前端体系,URL 加载,面试题">

    <!-- Import lsloader -->
    <script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(key){try{localStorage.removeItem(key)}catch(e){}};lsloader.setLS=function(key,val){try{localStorage.setItem(key,val)}catch(e){}};lsloader.getLS=function(key){var val="";try{val=localStorage.getItem(key)}catch(e){val=""}return val};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var keys=[];for(var i=0;i<localStorage.length;i++){keys.push(localStorage.key(i))}keys.forEach(function(key){var data=lsloader.getLS(key);if(window.oldVersion){var remove=window.oldVersion.reduce(function(p,c){return p||data.indexOf("/*"+c+"*/")!==-1},false);if(remove){lsloader.removeLS(key)}}})}catch(e){}};lsloader.clean();lsloader.load=function(jsname,jspath,cssonload,isJs){if(typeof cssonload==="boolean"){isJs=cssonload;cssonload=undefined}isJs=isJs||false;cssonload=cssonload||function(){};var code;code=this.getLS(jsname);if(code&&code.indexOf(versionString)===-1){this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}if(code){var versionNumber=code.split(versionString)[0];if(versionNumber!=jspath){console.log("reload:"+jspath);this.removeLS(jsname);this.requestResource(jsname,jspath,cssonload,isJs);return}code=code.split(versionString)[1];if(isJs){this.jsRunSequence.push({name:jsname,code:code});this.runjs(jspath,jsname,code)}else{document.getElementById(jsname).appendChild(document.createTextNode(code));cssonload()}}else{this.requestResource(jsname,jspath,cssonload,isJs)}};lsloader.requestResource=function(name,path,cssonload,isJs){var that=this;if(isJs){this.iojs(path,name,function(path,name,code){that.setLS(name,path+versionString+code);that.runjs(path,name,code)})}else{this.iocss(path,name,function(code){document.getElementById(name).appendChild(document.createTextNode(code));that.setLS(name,path+versionString+code)},cssonload)}};lsloader.iojs=function(path,jsname,callback){var that=this;that.jsRunSequence.push({name:jsname,code:""});try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(path,jsname,xhr.response);return}}that.jsfallback(path,jsname)}};xhr.send(null)}catch(e){that.jsfallback(path,jsname)}};lsloader.iocss=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.iofonts=function(path,jsname,callback,cssonload){var that=this;try{var xhr=new XMLHttpRequest;xhr.open("get",path,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){callback(xhr.response);cssonload();return}}that.cssfallback(path,jsname,cssonload)}};xhr.send(null)}catch(e){that.cssfallback(path,jsname,cssonload)}};lsloader.runjs=function(path,name,code){if(!!name&&!!code){for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code=code}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var script=document.createElement("script");script.appendChild(document.createTextNode(this.jsRunSequence[0].code));script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var that=this;var script=document.createElement("script");script.src=this.jsRunSequence[0].path;script.type="text/javascript";this.jsRunSequence[0].status="loading";script.onload=function(){that.jsRunSequence.shift();if(that.jsRunSequence.length>0){that.runjs()}};document.body.appendChild(script)}};lsloader.tagLoad=function(path,name){this.jsRunSequence.push({name:name,code:"",path:path,status:"failed"});this.runjs()};lsloader.jsfallback=function(path,name){if(!!this.jsnamemap[name]){return}else{this.jsnamemap[name]=name}for(var k in this.jsRunSequence){if(this.jsRunSequence[k].name==name){this.jsRunSequence[k].code="";this.jsRunSequence[k].status="failed";this.jsRunSequence[k].path=path}}this.runjs()};lsloader.cssfallback=function(path,name,cssonload){if(!!this.cssnamemap[name]){return}else{this.cssnamemap[name]=1}var link=document.createElement("link");link.type="text/css";link.href=path;link.rel="stylesheet";link.onload=link.onerror=cssonload;var root=document.getElementsByTagName("script")[0];root.parentNode.insertBefore(link,root)};lsloader.runInlineScript=function(scriptId,codeId){var code=document.getElementById(codeId).innerText;this.jsRunSequence.push({name:scriptId,code:code});this.runjs()};lsloader.loadCombo=function(jslist){var updateList="";var requestingModules={};for(var k in jslist){var LS=this.getLS(jslist[k].name);if(!!LS){var version=LS.split(versionString)[0];var code=LS.split(versionString)[1]}else{var version=""}if(version==jslist[k].path){this.jsRunSequence.push({name:jslist[k].name,code:code,path:jslist[k].path})}else{this.jsRunSequence.push({name:jslist[k].name,code:null,path:jslist[k].path,status:"comboloading"});requestingModules[jslist[k].name]=true;updateList+=(updateList==""?"":";")+jslist[k].path}}var that=this;if(!!updateList){var xhr=new XMLHttpRequest;xhr.open("get",combo+updateList,true);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status>=200&&xhr.status<300||xhr.status==304){if(xhr.response!=""){that.runCombo(xhr.response,requestingModules);return}}else{for(var i in that.jsRunSequence){if(requestingModules[that.jsRunSequence[i].name]){that.jsRunSequence[i].status="failed"}}that.runjs()}}};xhr.send(null)}this.runjs()};lsloader.runCombo=function(comboCode,requestingModules){comboCode=comboCode.split("/*combojs*/");comboCode.shift();for(var k in this.jsRunSequence){if(!!requestingModules[this.jsRunSequence[k].name]&&!!comboCode[0]){this.jsRunSequence[k].status="comboJS";this.jsRunSequence[k].code=comboCode[0];this.setLS(this.jsRunSequence[k].name,this.jsRunSequence[k].path+versionString+comboCode[0]);comboCode.shift()}}this.runjs()}})();</script>

    <!-- Import queue -->
    <script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!--iOS -->
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="C-Jimmy个人小站">

    <!-- Site Verification -->
    
    

    <!-- RSS -->
    

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS -->
    
        <style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
        <style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>

        

    

    

    <!-- Config CSS -->

<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    overflow-x: hidden !important;
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }

</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-color: #F5F5F5;
      }

      /* blog_info bottom background */
      #scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
        background-color: #fff;
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>


<!-- Import Font -->
<!-- Import Roboto -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


<!-- Import Material Icon -->

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">




    <!-- Import jQuery -->
    
        <script>lsloader.load("jq_js","/js/jquery.min.js?ezyEvm8ST5CGfpA+kFFi1g==", true)</script>
    

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="https://c-jimmy.github.io">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="输入URL后，按下回车键都发生了什么 | C-Jimmy个人小站">
    <meta property="og:image" content="https://c-jimmy.github.io/img/favicon.png" />
    <meta property="og:description" content="输入URL后，按下回车键都发生了什么
从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）">
    <meta property="og:article:tag" content="前端体系"> <meta property="og:article:tag" content="URL 加载"> <meta property="og:article:tag" content="面试题"> 

    
        <meta property="article:published_time" content="Tue Mar 20 2018 14:34:03 GMT+0800" />
        <meta property="article:modified_time" content="Tue Mar 20 2018 18:57:20 GMT+0800" />
    

    <!-- The Twitter Card protocol -->
    <meta name="twitter:title" content="输入URL后，按下回车键都发生了什么 | C-Jimmy个人小站">
    <meta name="twitter:description" content="输入URL后，按下回车键都发生了什么
从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）">
    <meta name="twitter:image" content="https://c-jimmy.github.io/img/favicon.png">
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://c-jimmy.github.io" />

    <!-- Add canonical link for SEO -->
    
        <link rel="canonical" href="https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html" />
    

    <!-- Structured-data for SEO -->
    
        


<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": "https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html",
    "headline": "输入URL后，按下回车键都发生了什么",
    "datePublished": "Tue Mar 20 2018 14:34:03 GMT+0800",
    "dateModified": "Tue Mar 20 2018 18:57:20 GMT+0800",
    "author": {
        "@type": "Person",
        "name": "C-Jimmy",
        "image": {
            "@type": "ImageObject",
            "url": "/img/avatar.png"
        },
        "description": "最痛苦的事,,不是失败，是我本可以"
    },
    "publisher": {
        "@type": "Organization",
        "name": "C-Jimmy个人小站",
        "logo": {
            "@type":"ImageObject",
            "url": "/img/favicon.png"
        }
    },
    "keywords": ",前端体系,URL 加载,面试题C-Jimmy博客",
    "description": "输入URL后，按下回车键都发生了什么
从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）",
}
</script>


    

    <!-- Analytics -->
    
    
    

    <!-- Custom Head -->
    

<link rel="stylesheet" href="/css/prism.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->


    <!-- Left aligned menu below button -->
    
    
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#输入URL后，按下回车键都发生了什么"><span class="post-toc-number">1.</span> <span class="post-toc-text">输入URL后，按下回车键都发生了什么</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）"><span class="post-toc-number">1.0.1.</span> <span class="post-toc-text">从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#多进程的浏览器"><span class="post-toc-number">1.0.1.1.</span> <span class="post-toc-text">多进程的浏览器</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#多线程的浏览器内核"><span class="post-toc-number">1.0.1.2.</span> <span class="post-toc-text">多线程的浏览器内核</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#解析URL"><span class="post-toc-number">1.0.1.3.</span> <span class="post-toc-text">解析URL</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp-ip请求，五层因特网协议栈等知识）"><span class="post-toc-number">1.0.2.</span> <span class="post-toc-text">开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#DNS-查询"><span class="post-toc-number">1.0.2.1.</span> <span class="post-toc-text">DNS 查询</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#TCP-IP-请求"><span class="post-toc-number">1.0.2.2.</span> <span class="post-toc-text">TCP/IP 请求</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）"><span class="post-toc-number">1.0.3.</span> <span class="post-toc-text">从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#负载均衡"><span class="post-toc-number">1.0.3.1.</span> <span class="post-toc-text">负载均衡</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#后台的处理"><span class="post-toc-number">1.0.3.2.</span> <span class="post-toc-text">后台的处理</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）"><span class="post-toc-number">1.0.4.</span> <span class="post-toc-text">后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#http报文结构"><span class="post-toc-number">1.0.4.1.</span> <span class="post-toc-text">http报文结构</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）"><span class="post-toc-number">1.0.5.</span> <span class="post-toc-text">单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#强缓存与弱缓存"><span class="post-toc-number">1.0.5.1.</span> <span class="post-toc-text">强缓存与弱缓存</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#缓存头部简述"><span class="post-toc-number">1.0.5.2.</span> <span class="post-toc-text">缓存头部简述</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#http1-0中的缓存控制："><span class="post-toc-number">1.0.5.3.</span> <span class="post-toc-text">http1.0中的缓存控制：</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#http1-1中的缓存控制："><span class="post-toc-number">1.0.5.4.</span> <span class="post-toc-text">http1.1中的缓存控制：</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#Max-Age相比Expires？"><span class="post-toc-number">1.0.5.5.</span> <span class="post-toc-text">Max-Age相比Expires？</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#E-tag相比Last-Modified？"><span class="post-toc-number">1.0.5.6.</span> <span class="post-toc-text">E-tag相比Last-Modified？</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）"><span class="post-toc-number">1.0.6.</span> <span class="post-toc-text">浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#流程简述-浏览器内核拿到内容后，渲染步骤大致可以分为以下几步："><span class="post-toc-number">1.0.6.1.</span> <span class="post-toc-text">流程简述(浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：)</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#HTML解析，构建DOM"><span class="post-toc-number">1.0.6.2.</span> <span class="post-toc-text">HTML解析，构建DOM</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#生成CSS规则"><span class="post-toc-number">1.0.6.3.</span> <span class="post-toc-text">生成CSS规则()</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#构建渲染树"><span class="post-toc-number">1.0.6.4.</span> <span class="post-toc-text">构建渲染树</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#渲染"><span class="post-toc-number">1.0.6.5.</span> <span class="post-toc-text">渲染</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）"><span class="post-toc-number">1.0.6.6.</span> <span class="post-toc-text">CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）"><span class="post-toc-number">1.0.7.</span> <span class="post-toc-text">JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）"><span class="post-toc-number">1.0.8.</span> <span class="post-toc-text">其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）</span></a></li></ol></li></ol></li></ol>
    </ul>
    




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script type="text/ls-javascript" id="post-thumbnail-script">
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').attr('data-original', '/img/random/material-' + randomNum + '.png');
    $('.post_thumbnail-random').addClass('lazy');
</script>

        
    
            <p class="article-headline-p">
                输入URL后，按下回车键都发生了什么
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>C-Jimmy</strong>
        <span>3月 20, 2018</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    
        <button id="article-functions-qrcode-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">devices other</i>
    <span class="visuallyhidden">devices other</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-qrcode-button">
    <li class="mdl-menu__item">在其它设备中阅读本文章</li>
    
        <img src="https://pan.baidu.com/share/qrcode?w=246&h=246&url=https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/">
    
</ul>

    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/URL-加载/">URL 加载</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/前端体系/">前端体系</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/面试题/">面试题</a>
    </ul>
    

    <!-- Share -->
    
        <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=输入URL后，按下回车键都发生了什么&url=https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html&pic=https://c-jimmy.github.io/img/favicon.png&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=输入URL后，按下回车键都发生了什么&url=https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html&via=C-Jimmy" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=https://c-jimmy.github.io/2018/03/20/输入URL后，按下回车键都发生了什么/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    

    <!-- Share Telegram -->
    
</ul>

    
</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <h2 id="输入URL后，按下回车键都发生了什么"><a href="#输入URL后，按下回车键都发生了什么" class="headerlink" title="输入URL后，按下回车键都发生了什么"></a>输入URL后，按下回车键都发生了什么</h2><ul>
<li><h4 id="从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）"><a href="#从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）" class="headerlink" title="从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）"></a>从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）</h4><a id="more"></a>
<ul>
<li><h5 id="多进程的浏览器"><a href="#多进程的浏览器" class="headerlink" title="多进程的浏览器"></a>多进程的浏览器</h5><ul>
<li>浏览器是多进程的，有一个主控进程，以及每一个tab页面都会新开一个进程（某些情况下多个tab会合并进程）</li>
<li>进程可能包括主控进程，插件进程，GPU，tab页（浏览器内核）等等。<ul>
<li>Browser进程：浏览器的主进程（负责协调、主控），只有一个</li>
<li>第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建</li>
<li>GPU进程：最多一个，用于3D绘制</li>
<li>浏览器渲染进程（内核）：默认每个Tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时候会优化，如多个空白tab会合并成一个进程）</li>
</ul>
</li>
</ul>
</li>
<li><h5 id="多线程的浏览器内核"><a href="#多线程的浏览器内核" class="headerlink" title="多线程的浏览器内核"></a>多线程的浏览器内核</h5><ul>
<li>GUI线程</li>
<li>JS引擎线程</li>
<li>事件触发线程</li>
<li>定时器线程</li>
<li>网络请求线程</li>
</ul>
</li>
<li><h5 id="解析URL"><a href="#解析URL" class="headerlink" title="解析URL"></a>解析URL</h5><ul>
<li>URL 的组成（协议头， 域名， 端口， 目录路径， 查询参数， hash 值）</li>
<li>网络请求都是单独的线程</li>
</ul>
</li>
</ul>
</li>
<li><h4 id="开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp-ip请求，五层因特网协议栈等知识）"><a href="#开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp-ip请求，五层因特网协议栈等知识）" class="headerlink" title="开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）"></a>开启网络线程到发出一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）</h4><ul>
<li><h5 id="DNS-查询"><a href="#DNS-查询" class="headerlink" title="DNS 查询"></a>DNS 查询</h5><ul>
<li>如果浏览器有缓存，直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用host</li>
<li>如果本地没有，就向dns域名服务器查询（本地域名服务器，根域名服务器，COM 顶级域名服务器， Google 域名服务器）</li>
</ul>
</li>
<li><h5 id="TCP-IP-请求"><a href="#TCP-IP-请求" class="headerlink" title="TCP/IP 请求"></a>TCP/IP 请求</h5><ul>
<li>请求三次握手，关闭四次挥手</li>
<li>tcp/ip的并发限制：浏览器对同一域名下并发的tcp连接是有限制的（2-10个不等）。</li>
<li>get和post的区别：<ul>
<li>get和post虽然本质都是tcp/ip，get会产生一个tcp数据包，post两个。</li>
<li>get请求时，浏览器会把 headers和 data一起发送出去，服务器响应200（返回数据）</li>
<li>post请求时，浏览器先发送 headers，服务器响应 100continue，浏览器再发送 data，服务器响应200（返回数据）。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><h4 id="从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）"><a href="#从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）" class="headerlink" title="从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）"></a>从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）</h4><ul>
<li><h5 id="负载均衡"><a href="#负载均衡" class="headerlink" title="负载均衡"></a>负载均衡</h5></li>
<li><h5 id="后台的处理"><a href="#后台的处理" class="headerlink" title="后台的处理"></a>后台的处理</h5><ul>
<li>一般有的后端是有统一的验证的，如安全拦截，跨域验证</li>
<li>如果这一步不符合规则，就直接返回了相应的http报文（如拒绝请求等）</li>
<li>然后当验证通过后，才会进入实际的后台代码，此时是程序接收到请求，然后执行（譬如查询数据库，大量计算等等）</li>
<li>等程序执行完毕后，就会返回一个http响应包（一般这一步也会经过多层封装）</li>
<li>然后就是将这个包从后端发送到前端，完成交互</li>
</ul>
</li>
</ul>
</li>
<li><h4 id="后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）"><a href="#后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）" class="headerlink" title="后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）"></a>后台和前台的http交互（这一部分包括http头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）</h4><ul>
<li><h5 id="http报文结构"><a href="#http报文结构" class="headerlink" title="http报文结构"></a>http报文结构</h5><ul>
<li><p>通用头部</p>
<ul>
<li>Request Url: 请求的web服务器地址</li>
<li>Request Method: 请求方式（Get、POST、OPTIONS、PUT、HEAD、DELETE、CONNECT、TRACE）</li>
<li>Status Code: 请求的返回状态码，如200代表成功</li>
<li><p>Remote Address: 请求的远程服务器地址（会转为IP）</p>
</li>
<li><p>通用状态码</p>
<ul>
<li>200——表明该请求被成功地完成，所请求的资源发送回客户端</li>
<li>304——自从上次请求后，请求的网页未修改过，请客户端使用本地缓存</li>
<li>400——客户端请求有错（譬如可以是安全模块拦截）</li>
<li>401——请求未经授权</li>
<li>403——禁止访问（譬如可以是未登录时禁止）</li>
<li>404——资源未找到</li>
<li>500——服务器内部错误</li>
<li>503——服务不可用</li>
</ul>
</li>
<li>范围状态码<ul>
<li>1xx——指示信息，表示请求已接收，继续处理</li>
<li>2xx——成功，表示请求已被成功接收、理解、接受</li>
<li>3xx——重定向，要完成请求必须进行更进一步的操作</li>
<li>4xx——客户端错误，请求有语法错误或请求无法实现</li>
<li>5xx——服务器端错误，服务器未能实现合法的请求</li>
</ul>
</li>
</ul>
</li>
<li>请求响应头部<ul>
<li>请求头<ul>
<li>Accept: 接收类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type）</li>
<li>Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收</li>
<li>Content-Type：客户端发送出去实体内容的类型</li>
<li>Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache</li>
<li>If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0中</li>
<li>Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间</li>
<li>Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中</li>
<li>If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中</li>
<li>Cookie：有cookie并且同域访问时会自动带上</li>
<li>Connection：当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive</li>
<li>Host：请求的服务器URL</li>
<li>Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私</li>
<li>Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)</li>
<li>User-Agent：用户客户端的一些必要信息，如UA头部等</li>
</ul>
</li>
<li>响应头<ul>
<li>Access-Control-Allow-Headers: 服务器端允许的请求Headers</li>
<li>Access-Control-Allow-Methods: 服务器端允许的请求方法</li>
<li>Access-Control-Allow-Origin: 服务器端允许的请求Origin头部（譬如为*）</li>
<li>Content-Type：服务端返回的实体内容的类型</li>
<li>Date：数据从服务器发送的时间</li>
<li>Cache-Control：告诉浏览器或其他客户，什么环境可以安全的缓存文档</li>
<li>Last-Modified：请求资源的最后修改时间</li>
<li>Expires：应该在什么时候认为文档已经过期,从而不再缓存它</li>
<li>Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效</li>
<li>ETag：请求变量的实体标签的当前值</li>
<li>Set-Cookie：设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端</li>
<li>Keep-Alive：如果客户端有keep-alive，服务端也会有响应（如timeout=38）</li>
<li>Server：服务器的一些相关信息</li>
</ul>
</li>
<li>其他<ul>
<li>请求头部的 Accept要和响应头部的 Content-Type匹配，否则会报错。</li>
<li>跨域请求时，请求头部的 Origin要匹配响应头部的 Access-Control-Allow-Origin，否则会报跨域错误。</li>
<li>在使用缓存时，请求头部的 If-Modified-Since、 If-None-Match分别和响应头部的 Last-Modified、 ETag对应。</li>
</ul>
</li>
</ul>
</li>
<li>Cookie 以及优化<ul>
<li>场景<ul>
<li>在登陆页面，用户登陆了</li>
<li>此时，服务端会生成一个session，session中有对于用户的信息（如用户名、密码等）</li>
<li>然后会有一个sessionid（相当于是服务端的这个session对应的key）</li>
<li>然后服务端在登录页面中写入cookie，值就是:jsessionid=xxx</li>
<li>然后浏览器本地就有这个cookie了，以后访问同域名下的页面时，自动带上cookie，自动检验，在有效时间内无需二次登陆。</li>
</ul>
</li>
</ul>
</li>
<li>gzip压缩<ul>
<li>gzip是一种压缩格式，需要浏览器支持才有效（不过一般现在浏览器都支持），gzip一般是由 apache、 tomcat等web服务器开启。</li>
</ul>
</li>
<li>长连接与短连接<ul>
<li>长连接：一个tcp/ip连接上可以连续发送多个数据包，在tcp连接保持期间，如果没有数据包发送，需要双方发检测包以维持此连接，一般需要自己做在线维持（类似于心跳包）</li>
<li>短连接：通信双方有数据交互时，就建立一个tcp连接，数据发送完成后，则断开此tcp连接</li>
</ul>
</li>
<li>http 2.0<ul>
<li>不同点<ul>
<li>http1.1中，每请求一个资源，都是需要开启一个tcp/ip连接的，所以对应的结果是，每一个资源对应一个tcp/ip请求，由于tcp/ip本身有并发数限制，所以当资源一多，速度就显著慢下来</li>
<li>http2.0中，一个tcp/ip请求可以请求多个资源，也就是说，只要一次tcp/ip请求，就可以请求若干个资源，分割成更小的帧请求，速度明显提升。</li>
</ul>
</li>
<li>特性<ul>
<li>多路复用（即一个tcp/ip连接可以请求多个资源）</li>
<li>首部压缩（http头部压缩，减少体积）</li>
<li>二进制分帧（在应用层跟传送层之间增加了一个二进制分帧层，改进传输性能，实现低延迟和高吞吐量）</li>
<li>服务器端推送（服务端可以对客户端的一个请求发出多个响应，可以主动通知客户端）</li>
<li>请求优先级（如果流被赋予了优先级，它就会基于这个优先级来处理，由服务器决定需要多少资源来处理该请求。）</li>
</ul>
</li>
</ul>
</li>
<li>https</li>
</ul>
</li>
</ul>
</li>
<li><h4 id="单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）"><a href="#单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）" class="headerlink" title="单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）"></a>单独拎出来的缓存问题，http的缓存（这部分包括http缓存头部，etag，catch-control等）</h4><ul>
<li><h5 id="强缓存与弱缓存"><a href="#强缓存与弱缓存" class="headerlink" title="强缓存与弱缓存"></a>强缓存与弱缓存</h5><ul>
<li>强缓存（ 200fromcache）时，浏览器如果判断本地缓存未过期，就直接使用，无需发起http请求</li>
<li>协商缓存（ 304）时，浏览器会向服务端发起http请求，然后服务端告诉浏览器文件未改变，让浏览器使用本地缓存</li>
</ul>
</li>
<li><h5 id="缓存头部简述"><a href="#缓存头部简述" class="headerlink" title="缓存头部简述"></a>缓存头部简述</h5>  <!--- 属于强缓存控制的：-->
  <!--```-->
  <!--（http1.1）Cache-Control/Max-Age-->
  <!--（http1.0）Pragma/Expires-->
  <!--```-->
  <!--- 属于协商缓存控制的：-->
  <!--```-->
  <!--（http1.1）If-None-Match/E-tag-->
  <!--（http1.0）If-Modified-Since/Last-Modified-->
  <!--```--></li>
<li><h5 id="http1-0中的缓存控制："><a href="#http1-0中的缓存控制：" class="headerlink" title="http1.0中的缓存控制："></a>http1.0中的缓存控制：</h5><ul>
<li>Pragma：严格来说，它不属于专门的缓存控制头部，但是它设置 no-cache时可以让本地强缓存失效（属于编译控制，来实现特定的指令，主要是因为兼容http1.0，所以以前又被大量应用）</li>
<li>Expires：服务端配置的，属于强缓存，用来控制在规定的时间之前，浏览器不会发出请求，而是直接使用本地缓存，注意，Expires一般对应服务器端时间，如 Expires：Fri,30Oct199814:19:41</li>
<li>If-Modified-Since/Last-Modified：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-Modified-Since，而服务端的是 Last-Modified，它的作用是，在发起请求时，如果 If-Modified-Since和 Last-Modified匹配，那么代表服务器资源并未改变，因此服务端不会返回资源实体，而是只返回头部，通知浏览器可以使用本地缓存。 Last-Modified，顾名思义，指的是文件最后的修改时间，而且只能精确到 1s以内</li>
</ul>
</li>
<li><h5 id="http1-1中的缓存控制："><a href="#http1-1中的缓存控制：" class="headerlink" title="http1.1中的缓存控制："></a>http1.1中的缓存控制：</h5><ul>
<li>Cache-Control：缓存控制头部，有no-cache、max-age等多种取值</li>
<li>Max-Age：服务端配置的，用来控制强缓存，在规定的时间之内，浏览器无需发出请求，直接使用本地缓存，注意，Max-Age是Cache-Control头部的值，不是独立的头部，譬如 Cache-Control:max-age=3600，而且它值得是绝对时间，由浏览器自己计算</li>
<li>If-None-Match/E-tag：这两个是成对出现的，属于协商缓存的内容，其中浏览器的头部是 If-None-Match，而服务端的是 E-tag，同样，发出请求后，如果 If-None-Match和 E-tag匹配，则代表内容未变，通知浏览器使用本地缓存，和Last-Modified不同，E-tag更精确，它是类似于指纹一样的东西，基于 FileEtagINodeMtimeSize生成，也就是说，只要文件变，指纹就会变，而且没有1s精确度的限制。</li>
</ul>
</li>
<li><h5 id="Max-Age相比Expires？"><a href="#Max-Age相比Expires？" class="headerlink" title="Max-Age相比Expires？"></a>Max-Age相比Expires？</h5><ul>
<li>Expires使用的是服务器端的时间，但是有时候会有这样一种情况-客户端时间和服务端不同步。那这样，可能就会出问题了，造成了浏览器本地的缓存无用或者一直无法过期，所以一般http1.1后不推荐使用 Expires。而 Max-Age使用的是客户端本地时间的计算，因此不会有这个问题，因此推荐使用 Max-Age。</li>
</ul>
</li>
<li><h5 id="E-tag相比Last-Modified？"><a href="#E-tag相比Last-Modified？" class="headerlink" title="E-tag相比Last-Modified？"></a>E-tag相比Last-Modified？</h5><ul>
<li>Last-Modified：<ul>
<li>表明服务端的文件最后何时改变的</li>
<li>它有一个缺陷就是只能精确到1s，</li>
<li>然后还有一个问题就是有的服务端的文件会周期性的改变，导致缓存失效</li>
</ul>
</li>
<li>E-tag:<ul>
<li>是一种指纹机制，代表文件相关指纹</li>
<li>只有文件变才会变，也只要文件变就会变，</li>
<li>也没有精确时间的限制，只要文件一遍，立马E-tag就不一样了</li>
</ul>
</li>
<li>如果同时带有 E-tag和 Last-Modified，服务端会优先检查 E-tag。<br><img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/GbDAi21j80.png?imageslim" alt="mark"></li>
</ul>
</li>
</ul>
</li>
<li><h4 id="浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）"><a href="#浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）" class="headerlink" title="浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）"></a>浏览器接收到http数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和domcontentloaded等）</h4><ul>
<li><h5 id="流程简述-浏览器内核拿到内容后，渲染步骤大致可以分为以下几步："><a href="#流程简述-浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：" class="headerlink" title="流程简述(浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：)"></a>流程简述(浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：)</h5><ul>
<li>解析HTML，构建DOM树</li>
<li>解析CSS，生成CSS规则树</li>
<li>合并DOM树和CSS规则，生成render树</li>
<li>布局render树（Layout/reflow），负责各元素尺寸、位置的计算</li>
<li>绘制render树（paint），绘制页面像素信息</li>
<li>浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上<br><img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/e7hhbfE583.png?imageslim" alt="mark"></li>
</ul>
</li>
<li><h5 id="HTML解析，构建DOM"><a href="#HTML解析，构建DOM" class="headerlink" title="HTML解析，构建DOM"></a>HTML解析，构建DOM</h5><ul>
<li>Conversion转换：浏览器将获得的HTML内容（Bytes）基于他的编码转换为单个字符</li>
<li>Tokenizing分词：浏览器按照HTML规范标准将这些字符转换为不同的标记token。每个token都有自己独特的含义以及规则集</li>
<li>Lexing词法分析：分词的结果是得到一堆的token，此时把他们转换为对象，这些对象分别定义他们的属性和规则</li>
<li>DOM构建：因为HTML标记定义的就是不同标签之间的关系，这个关系就像是一个树形结构一样。例如：body对象的父节点就是HTML对象，然后段略p对象的父节点就是body对象<br><img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/3dIFKCgi2I.png?imageslim" alt="mark"></li>
</ul>
</li>
<li><h5 id="生成CSS规则"><a href="#生成CSS规则" class="headerlink" title="生成CSS规则()"></a>生成CSS规则()</h5>  <img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/cD3kdb62LD.png?imageslim" alt="mark"></li>
<li><h5 id="构建渲染树"><a href="#构建渲染树" class="headerlink" title="构建渲染树"></a>构建渲染树</h5>  <img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/3Di73eE0iH.png?imageslim" alt="mark"></li>
<li><h5 id="渲染"><a href="#渲染" class="headerlink" title="渲染"></a>渲染</h5><ul>
<li>步骤<ul>
<li>计算CSS样式</li>
<li>构建渲染树</li>
<li>布局，主要定位坐标和大小，是否换行，各种position overflow z-index属性</li>
<li>绘制，将图像绘制出来<br><img src="http://oz1lum573.bkt.clouddn.com/c-jimmy/180320/gIKG4bcH15.png?imageslim" alt="mark"></li>
</ul>
</li>
<li>Layout和Repaint 的区别<ul>
<li>Layout，也称为Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树</li>
<li>Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了</li>
</ul>
</li>
<li>什么会引起回流？<ul>
<li>页面渲染初始化</li>
<li>DOM结构改变，比如删除了某个节点</li>
<li>render树变化，比如减少了padding</li>
<li>窗口resize</li>
<li>最复杂的一种：获取某些属性，引发回流</li>
</ul>
</li>
<li>优化方案<ul>
<li>减少逐项更改样式，最好一次性更改style，或者将样式定义为class并一次性更新</li>
<li>避免循环操作dom，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document</li>
<li>避免多次读取offset等属性。无法避免则将它们缓存到变量</li>
<li>将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高</li>
</ul>
</li>
<li>当遇到上述的外链时<ul>
<li>会单独开启一个下载线程去下载资源（http1.1中是每一个资源的下载都要开启一个http请求，对应一个tcp/ip链接）。</li>
</ul>
</li>
<li>遇到CSS样式资源<ul>
<li>CSS下载时异步，不会阻塞浏览器构建DOM树</li>
<li>但是会阻塞渲染，也就是在构建render时，会等到css下载解析完毕后才进行（这点与浏览器优化有关，防止css规则不断改变，避免了重复的构建）</li>
<li>media query声明的CSS是不会阻塞渲染的</li>
</ul>
</li>
<li>遇到JS脚本资源<ul>
<li>阻塞浏览器的解析，也就是说发现一个外链脚本时，需等待脚本下载完成并执行后才会继续解析HTML浏览器的优化，一般现代浏览器有优化，在脚本阻塞时，也会继续下载其它资源（当然有并发上限）但是虽然脚本可以并行下载，解析过程仍然是阻塞的，也就是说必须这个脚本执行完毕后才会接下来的解析，并行下载只是一种优化而已</li>
<li>defer与async，普通的脚本是会阻塞浏览器解析的，但是可以加上defer或async属性，这样脚本就变成异步了，可以等到解析完毕后再执行</li>
</ul>
</li>
<li>遇到img图片类资源<ul>
<li>直接就是异步下载，不会阻塞解析，下载完毕后直接用图片替换原有src的地方。</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><h5 id="CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）"><a href="#CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）" class="headerlink" title="CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）"></a>CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）</h5><ul>
<li>知识点<ul>
<li>CSS中规定每一个元素都有自己的盒子模型（相当于规定了这个元素如何显示）</li>
<li>然后可视化格式模型则是把这些盒子按照规则摆放到页面上，也就是如何布局</li>
<li>换句话说，盒子模型规定了怎么在页面里摆放盒子，盒子的相互作用等等</li>
</ul>
</li>
<li>关键字<ul>
<li>包含块（Containing Block）<ul>
<li>根元素是最顶端的元素，它没有父节点，它的包含块就是初始包含块</li>
<li>static和relative的包含块由它最近的块级、单元格或者行内块祖先元素的内容框（content）创建</li>
<li>fixed的包含块是当前可视窗口</li>
<li>absolute的包含块由它最近的position 属性为 absolute、 relative或者 fixed的祖先元素创建</li>
</ul>
</li>
<li>控制框（Controlling Box）<ul>
<li>block，元素生成一个块框</li>
<li>inline，元素产生一个或多个的行内框</li>
<li>inline-block，元素产生一个行内级块框，行内块框的内部会被当作块块来格式化，而此元素本身会被当作行内级框来格式化</li>
<li>none，不生成框，不再格式化结构中，当然了，另一个 visibility:hidden则会产生一个不可见的框</li>
</ul>
</li>
<li>BFC（Block Formatting Context）<ul>
<li>FC即格式上下文，它定义框内部的元素渲染规则，比较抽象</li>
<li></li>
</ul>
</li>
<li>IFC（Inline Formatting Context）</li>
<li>定位体系</li>
<li>浮动</li>
</ul>
</li>
</ul>
</li>
<li><h4 id="JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）"><a href="#JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）" class="headerlink" title="JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）"></a>JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）</h4></li>
<li><h4 id="其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）"><a href="#其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）" class="headerlink" title="其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）"></a>其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）</h4></li>
</ul>

        
    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <!-- 使用 gitcoment -->
<div id="gitment-comment">
    <!-- Gitment 评论框 -->
<div id="container"></div>
</div>
<style>
    #gitment-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
<script>
    var gitment = new Gitment({
        //id: '页面 ID', // 可选。默认为 location.href
        owner: 'c-jimmy',
        repo: 'c-jimmy.github.io',
        oauth: {
            client_id: 'bf8a277426958f1eee1e',
            client_secret: '41817d6823ae6ffb157ba5f8653619ffcf57a674',
        },
    })
    gitment.render('container')
</script>

                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/12/07/jQuery-源码分析（三）：jQuery-fn-init-源码逐行详解/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/avatar.png" alt="C-Jimmy's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        923415929@qq.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/archives/2018/03/">三月 2018<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/12/">十二月 2017<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/11/">十一月 2017<span class="sidebar_archives-count">6</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/categories/jQuery/">jQuery<span class="sidebar_archives-count">3</span></a></li><li><a class="sidebar_archives-link" href="/categories/javascript/">javascript<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/vue/">vue<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/categories/前端体系/">前端体系<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/杂项/">杂项<span class="sidebar_archives-count">3</span></a>
            </ul>
        </li>
        
    

    <!-- Pages  -->
    
        <li>
            <a href="/about" title="关于我">
                
                    <i class="material-icons sidebar-material-icons">person</i>
                
                关于我
            </a>
        </li>
        
    
        <li>
            <a href="/links" title="友情链接">
                
                    <i class="material-icons sidebar-material-icons">links</i>
                
                友情链接
            </a>
        </li>
        
    

    <!-- Article Number  -->
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->

    <a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
            主题 - Material
            <span class="sidebar-badge badge-circle">i</span>
        </div>
    </a>


<!-- Help & Support -->
<!--

-->

<!-- Feedback -->
<!--

-->

<!-- About Theme -->
<!--

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div id="back-to-top" class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    
        <a href="https://twitter.com/twitter" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-twitter">
                <span class="visuallyhidden">Twitter</span>
            </button><!--
     --></a>
    

    <!-- Facebook -->
    
        <a href="https://www.facebook.com/facebook" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-facebook">
                <span class="visuallyhidden">Facebook</span>
            </button><!--
     --></a>
    

    <!-- Google + -->
    
        <a href="https://www.google.com/" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-gplus">
                <span class="visuallyhidden">Google Plus</span>
            </button><!--
     --></a>
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/c-jimmy" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn footer-sns-github">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
    
    <!-- V2EX -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>C-Jimmy个人小站
            
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import JS File -->

    <script>lsloader.load("lazyload_js","/js/lazyload.min.js?wgjW/HuQG9JDgvPDPoRAng==", true)</script>



    <script>lsloader.load("js_js","/js/js.min.js?V/53wGualMuiPM3xoetD5Q==", true)</script>



    <script>lsloader.load("np_js","/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>


<script type="text/ls-javascript" id="NProgress-script">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>









   <!-- Gitment -->





<!-- UC Browser Compatible -->
<script>
	var agent = navigator.userAgent.toLowerCase();
	if(agent.indexOf('ucbrowser')>0) {
		document.write('<link rel="stylesheet" href="/css/uc.css">');
	   alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
	}
</script>

<!-- Import prettify js  -->



<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
    $(window).on('load', function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });

    
    
</script>

<!-- MathJax Load-->


<!-- Bing Background -->


<script type="text/ls-javascript" id="lazy-load">
    // Offer LazyLoad
    queue.offer(function(){
        $('.lazy').lazyload({
            effect : 'show'
        });
    });

    // Start Queue
    $(document).ready(function(){
        setInterval(function(){
            queue.execNext();
        },200);
    });
</script>

<!-- Custom Footer -->



<script>
    (function(){
        var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')

        for (var i = 0; i < scriptList.length; ++i) {
            var item = scriptList[i];
            lsloader.runInlineScript(item.id,item.id);
        }
    })()
console.log('\n %c © Material Theme | Version: 1.5.0 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>

                </main>
            </div>
        </body>
    
</html>
